<template>
  <div class="room-details">
    <van-nav-bar safe-area-inset-top class="top-bar" title="出租信息" left-arrow @click-left="onClickLeft" />

    <div class="main">
      <van-swipe class="room-swipe" indicator-color="white" @change="swipeChange" @click="swipeClick" height="250">
        <van-swipe-item v-if="roomDetails.video">
          <div class="video-box">
            <video class="room-video" autoplay controls="controls" muted ref="videoTag">
              <source :src="roomDetails.video" />
            </video>
          </div>
        </van-swipe-item>
        <van-swipe-item v-for="(item, index) in roomDetails.pictureUrl" :key="index">
          <van-image fit="cover" height="250" width="100%" :src="item" alt="Load Fail" />
        </van-swipe-item>
      </van-swipe>
      <div class="room-title">
        <h1>{{ roomDetails.introduce || '-' }}</h1>
      </div>
      <div class="room-rent">
        <div class="money">
          <div class="label">租金</div>
          <div class="value">{{ roomDetails.price || '-' }}元/月</div>
        </div>
        <div class="area">
          <div class="label">面积</div>
          <div class="value">{{ roomDetails.area || '-' }} 平</div>
        </div>
        <div class="house-type">
          <div class="label">户型</div>
          <div class="value">{{ roomDetails.houseNumDescription }}</div>
        </div>
      </div>
      <div class="divider-block"></div>
      <div class="room-info">
        <div class="info-title">
          <h1>租房信息</h1>
        </div>
        <ul class="info-list">
          <li class="info-item">
            <div class="left-box">
              <span class="label">电梯</span>
              <span>：</span>
              <span class="value">{{ elevatorDesc }}</span>
            </div>
            <div class="right-box">
              <span class="label">所在楼层</span>
              <span>：</span>
              <span class="value">{{ roomDetails.hight }}层</span>
            </div>
          </li>
          <li class="info-item">
            <div class="left-box">
              <span class="label">网络</span>
              <span>：</span>
              <span class="value">{{ networkDesc }}</span>
            </div>
            <div class="right-box">
              <span class="label">押金方式</span>
              <span>：</span>
              <span class="value">{{ detainDesc }}</span>
            </div>
          </li>
          <li class="info-item">
            <div class="left-box">
              <span class="label">水费</span>
              <span>：</span>
              <span class="value">{{ roomDetails.waterRate }}元/吨</span>
            </div>
            <div class="right-box">
              <span class="label">电费</span>
              <span>：</span>
              <span class="value">{{ roomDetails.electricRate }}元/度</span>
            </div>
          </li>
          <li class="info-item">
            <div class="left-box">
              <span class="label">管理费</span>
              <span>：</span>
              <span class="value">{{ roomDetails.manageRate }}</span>
            </div>
            <div class="right-box">
              <span class="label">起租期限</span>
              <span>：</span>
              <span class="value">6个月</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="divider-block"></div>
      <div class="info-title">
        <h1>房间位置</h1>
      </div>
      <div class="room-location">
        <div class="location">
          <i class="iconfont icon-dingwei"></i>{{ roomDetails.location }}{{ roomDetails.address }}
        </div>
        <div id="map-box"></div>
      </div>
    </div>
    <div class="seize-seat"></div>
    <div class="footer">
      <div class="share" @click="showShare = true">
        <i class="iconfont icon-fenxiang"></i>
        <div class="share-text">分享</div>
      </div>
      <div class="reservation">
        <van-button class="btn" round color="#ee0a24" size="normal" type="primary" @click="handleShowings"
          >预约看房</van-button
        >
      </div>
    </div>
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="shareSelect" />
  </div>
</template>

<script setup>
import { ref, onMounted, toRefs, reactive, computed, toRaw } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { showToast, showImagePreview } from 'vant';
import { requesRoomDetails } from '@/api';
import { detainEnv } from '@/constants/guangzhou';

const router = useRouter();
const Route = useRoute();

const videoTag = ref();
const options = ref([
  { name: '微信', icon: 'wechat' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
  { name: '分享海报', icon: 'poster' },
  { name: '二维码', icon: 'qrcode' },
]);
let showShare = ref(false);

const state = reactive({
  roomDetails: {},
});

const { roomDetails } = toRefs(state);

onMounted(() => {
  getRoomDetails();
});

function onClickLeft() {
  router.back();
}

async function getRoomDetails() {
  try {
    let res = await requesRoomDetails({ id: Route.query.id });
    if (res) {
      state.roomDetails = res.data;
      initMap();
    }
  } catch (error) {
    console.log(error);
  }
}
let enumeration = [
  { code: 1, text: '有' },
  { code: 2, text: '无' },
];

const elevatorDesc = computed(() => {
  return enumeration.find(item => item.code == state.roomDetails.elevator)?.text;
});
const networkDesc = computed(() => {
  return enumeration.find(item => item.code == state.roomDetails.network)?.text;
});
const detainDesc = computed(() => {
  return detainEnv.find(item => item.value == state.roomDetails.detain)?.text;
});

const detailedAddress = () => {
  const { location, address } = state.roomDetails;
  let str = '';
  if (location && address) {
    str = location + address;
  }
  if (str) {
    let tempText = str.match(/^.{3}([\s\S]+)/)[1];
    str = tempText && tempText.replace(/[\/\s]/g, '');
  }
  return str || '-';
};

function shareSelect(option) {
  if (option.name == '复制链接') {
    navigator.clipboard
      .writeText(window.location.href)
      .then(() => {
        showToast('已成功复制到剪贴板');
      })
      .catch(err => {
        console.error('复制失败:', err);
      });
  }
  showShare.value = false;
}

function initMap() {
  const map = new BMapGL.Map('map-box');
  const geocoder = new BMapGL.Geocoder();
  let address = detailedAddress();
  console.log(address, 'address');
  geocoder.getPoint(
    address,
    function (point) {
      if (point) {
        var markergg = new BMapGL.Marker(point);

        map.centerAndZoom(point, 20);

        map.addControl(new BMapGL.ZoomControl());

        map.addOverlay(markergg);

        const label = new BMapGL.Label(address);

        markergg.setLabel(label); // 添加百度label
      } else {
        console.error('地址解析失败');
      }
    },
    '广东省'
  );
}
//轮播图点击
function swipeClick() {
  showImagePreview({
    images: state.roomDetails.pictureUrl,
    closeable: true,
  });
}
function swipeChange() {
  videoTag.value && videoTag.value.pause();
}
function handleShowings() {
  const phoneNumber = '1234567890'; // 将号码替换为实际要拨打的号码
  window.location.href = `tel:${phoneNumber}`;
}
</script>

<style lang="less" scoped>
.room-details {
  * {
    box-sizing: border-box;
  }
  .top-bar {
    & :deep(.van-ellipsis) {
      overflow: visible;
    }
  }

  .seize-seat {
    height: 58px;
    width: 100%;
  }

  .main {
    .room-swipe .van-swipe-item {
      color: #fff;
      font-size: 11px;
      text-align: center;
    }

    .video-box {
      background-color: rgb(0 0 0);

      .room-video {
        width: 100%;
        height: 250px;
      }
    }

    .room-title {
      width: 100%;
      padding: 14px 12px;
      border-bottom: 1px solid #ececec;

      h1 {
        font-size: 15px;
        font-weight: bold;
        margin: 0;
        padding: 0;
        line-height: 1.5;
        color: #333;
      }
    }

    .room-rent {
      display: flex;
      padding: 15px 0;

      .money {
        flex: 1;
        text-align: center;
      }

      .area {
        flex: 1;
        text-align: center;
      }

      .house-type {
        flex: 1;
        text-align: center;
      }

      .money,
      .area,
      .house-type {
        .label {
          font-size: 12px;
          margin-bottom: 10px;
          color: #666;
        }

        .value {
          font-size: 15px;
          color: #ee0a24;
          font-weight: 500;
        }
      }
    }

    .divider-block {
      height: 10px;
      width: 100%;
      background-color: var(--color-background-base);
    }

    .info-title {
      width: 100%;
      padding: 14px 12px;

      h1 {
        font-size: 15px;
        font-weight: bold;
        margin: 0;
        padding: 0;
        line-height: 1.5;
        color: #333;
      }
    }

    .room-info {
      padding-bottom: 25px;

      .info-title {
        width: 100%;
        padding: 14px 12px;

        h1 {
          font-size: 15px;
          font-weight: bold;
          margin: 0;
          padding: 0;
          line-height: 1.5;
          color: #333;
        }
      }

      .info-list {
        padding: 0 12px;
        list-style: none;
        display: grid;
        row-gap: 15px;

        .info-item {
          display: flex;

          .left-box {
            flex: 1;
            font-size: 13px;
          }

          .right-box {
            flex: 1;
            font-size: 13px;
          }

          .left-box,
          .right-box {
            .label {
              color: #999;
            }

            .value {
              color: #333;
            }
          }
        }
      }
    }

    .room-location {
      width: 100%;

      .location {
        padding: 0 12px;
        width: 100%;
        color: #666;
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 12px;
      }

      .icon-dingwei {
        margin-right: 4px;
      }

      #map-box {
        height: 175px;
        width: 100%;
        background-color: #eaeaea;
      }
    }
  }

  .footer {
    position: fixed;
    width: 100%;
    height: 64px;
    left: 0;
    bottom: 0;
    padding: 0 14px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-top: 1px solid #ececec;
    background-color: #fff;
    z-index: 20;

    .share {
      text-align: center;
    }

    .icon-fenxiang {
      font-size: 22px;
    }

    .share-text {
      font-size: 13px;
      color: #666;
      margin-top: 2.5px;
    }

    .reservation {
      flex: 1;
      display: flex;
      justify-content: flex-end;

      .btn {
        width: 175px;
      }
    }
  }
}
</style>
